<template>
  <view
      v-show="openType"
       class="fixed top-0 left-0 right-0 flex justify-between items-center overflow-hidden flex-nowrap"
       style="z-index: 29999; width: 750rpx; left: -750rpx;" :style="{ left: showLeftX+'rpx'}"
       @touchstart="selfTouchstartFn" @touchmove="selfTouchmoveFn"  @touchend="selfTouchendFn"
  >

      <view class="bg-white h-screen overflow-y-scroll relative" style="width: 300rpx; ">
        <slot></slot>
      </view>

      <view class="bg-black bg-opacity-50 min-h-screen relative " style="width: 450rpx;">

      </view>

  </view>
</template>

<script>
	let that = null;
	export default {
		name: "smm-drawer",
		data() {
			return {
				befoX: 0,
        showLeftX: -750,
        moveX: 0,
				bingo: false,
				afterX: 0,
				timer: null,
				openType: this.open,
				bgColor: '',
				userImg: '',
				wh: 0,
				ww: 0,
			};
		},
		created() {
			that = this;
			const info = uni.getSystemInfoSync();
			this.wh = this.userHeaderSwitch ? info.windowHeight - 280 : nfo.windowHeight - 100;
			this.ww = info.windowWidth;
		},
		props: {
			// 侧标栏宽度
			width: {
				type: Number,
				default: 600
			},
			// 状态是否打开
			open: {
				type: Boolean,
				default: false
			},
			// 移动的距离
			moveDist: {
				type: Number,
				default: 60
			},
			// 触摸滑动的初始位置
			touchScope: {
				type: Number,
				default: 100
			},
			// 是否允许手指滑动拉开
			touch: {
				type: Boolean,
				default: true
			},
			// 是否开启用户栏目
			userHeaderSwitch: {
				type: Boolean,
				default: true
			},
			// 用户栏目背景
			userBackground: {
				type: String,
				default: 'green'
			},
			// 用户信息
			userInfo: {
				type: Object,
				default: function() {
					return {
						name: '用户',
						img: 'red',
						userId: '0000000'
					};
				}
			}
		},
		watch: {
			userBackground: {
				deep: true,
				immediate: true,
				handler(val) {
					this.bgColor = /.*.(jpg|png|gif|jpeg|php)\s*$/.test(val) ? `url(${val})` : val;
				}
			},
			userInfo: {
				deep: true,
				immediate: true,
				handler(val) {
					this.userImg = /.*.(jpg|png|gif|jpeg|php)\s*$/.test(val.img) ? `url(${val.img})` : val.img
				}
			},
			open: {
				deep: true,
				immediate: true,
				handler(val) {
					this.openType = val;
				}
			},
			openType: {
				deep: true,
				immediate: true,
				handler(val) {
					console.log("openType val",val);
          if (val) {
            console.log("打开了");
          }else{
            console.log("关闭了")
          }
				}
			}
		},
		methods: {
      selfTouchstartFn(e){
        //如果不允许滑动打开，直接返回
        if (!this.touch) return
        //如果不是从最N倍的50像素内开始滑动，直接返回
        if (e.changedTouches[0].pageX < this.touchScope*2) return

        //记录开始滑动的位置
        this.bingo = true;
        this.befoX = e.changedTouches[0].pageX;
      },
      selfTouchmoveFn(e){
        if (this.befoX) {
          let temp_moveX=e.changedTouches[0].pageX - this.befoX
          console.log("selfTouchmoveFn temp_moveX",temp_moveX)
          //大于0是从左往右,是打开动作
          //小于0是从右往左,是关闭动作
          if (temp_moveX < 0) {
            this.moveX = temp_moveX;
            this.showLeftX = temp_moveX;
          }
        }
      },
      selfTouchendFn(e){
        let temp_moveX=e.changedTouches[0].pageX - this.befoX
        //小于0是从右往左,是关闭动作
        //所以这里移动距离要小于此阈值
        if (temp_moveX < -1*this.moveDist) {
          this.openType = false;
          while (this.showLeftX>-750){
            this.showLeftX-=10
          }
          this.showLeftX = -750;
        }else {
          this.openType = true;
          while (this.showLeftX<0){
            this.showLeftX+=10
          }
          this.showLeftX = 0;
        }
        //停止导航的滑动
        this.befoX = 0;
        this.moveX = 0; //滑动的距离
        this.bingo = false;
      },
			touchstartFn(e) {
        //如果不允许滑动打开，直接返回
				if (!this.touch) return
        //如果已经打开,则返回
        if (this.openType) return
        //如果不是从最左侧50像素内开始滑动，直接返回
				if (e.changedTouches[0].pageX > this.touchScope) return
        //记录开始滑动的位置
				this.bingo = true;

        //显示出来
        this.openType = true;

				this.befoX = e.changedTouches[0].pageX;
			},
      touchmoveFn(e) {
        //如果不允许滑动打开，直接返回
				if (!this.touch) return
        //如果已经开始了滑动
				if (this.befoX) {
          let temp_moveX=e.changedTouches[0].pageX - this.befoX
          console.log("touchmoveFn temp_moveX",temp_moveX)
          //大于0是从左往右,是打开动作
          //小于0是从右往左,是关闭动作
          if (temp_moveX > 0) {
            this.moveX = temp_moveX;
            this.showLeftX = -750+temp_moveX;
            console.log("this.moveX  ",this.moveX )
          }
				}
			},
			touchendFn(e) {
        //如果不允许滑动打开，直接返回
				if (!this.touch) return

        //如果已经开始了滑动
				if (this.befoX) {
					// console.log(e.changedTouches[0].pageX - this.befoX);
          //如果滑动的距离大于100像素，打开抽屉式导航
					if (e.changedTouches[0].pageX - this.befoX > this.moveDist) {
						this.openType = true;
            // 使用循环将showLeftX迭代到0
            while (this.showLeftX<0){
              this.showLeftX+=10
            }
            this.showLeftX = 0;
					}else {
            while (this.showLeftX>-750){
              this.showLeftX-=10
            }
            this.showLeftX = -750;
            this.openType=false
          }
          //停止导航的滑动
					this.befoX = 0;
					this.moveX = 0; //滑动的距离
					this.bingo = false;
				}
			},
			openDrawerFn() {
				console.log('打开界面');
				this.openType = true;
			},
			closeBarFn(e) {

        while (this.showLeftX>-750){
          this.showLeftX-=10
        }
        this.showLeftX = -750;
        this.openType=false

			},
			// 滑动关闭 - 用户手指按下时
			UseTouchstartTocloseBarFn(e) {
				this.befoX = e.changedTouches[0].pageX;
			},
			// 滑动关闭 - 用户手指松开时
			UseTouchendTocloseBarFn(e) {
				if (this.befoX - e.changedTouches[0].pageX > this.moveDist) {
					this.closeBarFn();
				}
			}
		}
	}
</script>

